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View: komponen yang berfungsi menampilkan state dari sistem dan menerima input 

dari user > widget / page. 

Model: komponen yang merepresentasikan objek yang terkait di dalam sistem. 

Contoh: class User, class Product, class Store, dsb. 

Tujuan MVVM 

Memisahkan state dan logic dari View menjadi sebuah komponen lain yang disebut View Model 
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MVVM (MODEL — VIEW — VIEW MODEL) 


Tugas View: 
bh, 
* Memberitahukan kepada View Model jika ada input dari user. 


* Merespon perubahan state yang diberikan oleh View Model dan menampilkannya kepada user. 


Tugas View Model: 
* Merespon input yang diberikan oleh View. 


* View Model tidak tahu dan tidak terkait dengan View manapun. la hanya memberitahukan perubahan 
state pada view yang membutuhkan/terkait. 
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Ini diagram nya 
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MVVM (MODEL — VIEW — VIEW MODEL) 


user ah akan 


update 


— changes 


async response || || async request 


Backend 


05:43 C 
Hom m tiu Fisik 


sekarang praktek nya 
Untuk kali ini kita gunaka api untuk data users 
Di ambil sigle users 
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Kembali disni kita buat 3 folder didalm lib 
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& mindan è 


import 


void main = runApp(MyApp() 


VE 
$ cd. 
$ flutter run 


Your application code is in .\lib\main.dart. 


haie exit code 0 


DEPENDENCIES 


ESTEE cm Sisik ge 
Buat model untuk letakan model nya 

Kedua Ui unutk widget nya 

Ketiga view model untuk view model dalam flutter lebih mengenal namanya bloc 
fungsi nya juga sama 


A SGFLUTTER 53. MVVM Architecture.mp4 - VLC media player - x 
Media Playback Audio Video Terjemahan Pera 
X) File Edit Sek View Go Debug 


Tampilan Bantuan 


import 


void main = runApp 


$ed 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code 0 
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N «mn tim EE c ad 
Buat satu model lagi service yaitu service ke backend terserah 


Untuk gabung ke model pisahkan juga untuk servicee2 sendiri 

Untuk kali gabung dgn model nya 

Model user itu akan berisi method2 untuk mengambil user mengunakan api 
Skarang buat dulu model nya 

Dibuat user.dart 


x] Ale Edit Selection 


e 


"—— 
.. 

& user.dart 
uvvu Demo 

LS 

s 

= 

" 


$ o 
$ cd. 
$ flutter run 


Your application code is in .\lib\main.dart. 


OUTUNE 
DEPENDENCIES 
TODOS 


exit code 0 


Lalu di pubspec pasang 2package 
Yg akan digunakan 


http dan fluter bloc 
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.. pubspec yami 


dependencies: 
flutter: 
sdk: 


cupertino_icons: 
http: : 
27 flutter bloc: 


dev dependencies: 
flutter test: 
sdk: 


J Futter 


[mvvm_demo] flutter packages get 
Running "flutter pub get" in mvvm_demo 


outUNE 
DEPENDENCIES 
TOOOS 
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Hom tim Fisik o ai 
Sekarang buat user dart nya 

Ini adalah clas user nya 
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OPEN EDITORS 2 UNSAVED import 


e« 
oë J import 


a class User 
id; 
email; 
firstName; 


r({this.id, this.email, this.firstName, this.lastName, this.avatar}); 


factory .createUser(Map«String, dynamic» object) { 
return User( 
id: object «toStri 
email: object , 
firstName: object 


Ð oum flutter 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 13.0s 
exit code 0 


OUTUNE 


DEPENDENCIES 


09:48 24:30 


Ada controctornya 
Lalu ada factory method nya untuk membuat user hasil map dari json 
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© Guedat © 


dye — String email; 
€ @ wan S ng firstName; 
ng lastName; 
— S ng avatar; 
. 
= r({this.id, this.email, this.firstName, this.lastName, this.avatar]); 
factory User.createUser(Map<Stri ynamic> object) { 
return User( 
id: object .toStri 
email: object A 
firstName: object 
lastName: object 
avatar: object 


static Future<User> getUserFromAPI(int id) async { 


Ð oumu 


[mvvm_demo] flutter packages get 
Running "flutter pub get" in mvvm demo ... 
exit code 0 


OUTUNE 
DEPENDENCIES 


09:53 24:30 


Lalu juga method 


B © € wedan 


OPEN EDITORS 2 UNSAVED "rase rer bh te 


ee email: object 
© & userdart firstName: object 
mde lastName: object 
dea avatar: object[": D» 


static Future«User» getUserFromAPI(int id) async ( 
String apiURL tps: | * id.toString(); 


var apiResult = await http.get(apiURL); 
var jsonObject = json.decode(apiResult.body); 
var userData - (jsonObject as Map«Stri dynamic»)[' 


return er.createUser(userData); 


3 UTPL Flutter 
[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
Tooos 


Tambhan disini adalah kita buat lagi satu buah class turunan user yaitu 
UninitializedUser fungsi untuk dipakai dibloc nanti 


OPEN EDITORS 1 UNSAVED 


"7 avatar: object ); 
© uedan } 


MVVM DEMO 


static Future«User» getUserFromAPI(int id) async ( 
String apiURL - : * id.toString(); 


var apiResult - await http.get(apiURL); 
var jsonObject - json.decode(apiResult.body); 
var userData = (jsonObject as Map«String, dynamic»)[ 


return User.createUser(userData); 


class UninitializedUser extends User 


3 
[mvvm_demo] flutter packages get 

Running "flutter pub get" in mvvm_demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 


Berikutnya ke bloc 
Buat user_bloc dart 

Lalu import 

Lalu clas userBloc ectend dari si bloc 

Masukan berupoa inter <int, dia minta id berapa usernya 
Lalu dia akan kemablikan user> 

Untuk user sediri kita ambil dari model/user.dart 

Lalu ini ada 2 buah 


m 


& e« 
OPEN EDITORS import 
.6 


© user-dart import 
“a 
ponn 4 class UserBloc extends Bloc€int, User» 
MVVM DEMO 
M idea Create 2 missing overrides) 


. 
E 
E 


4 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 


Untuk bloc sendri sudah dijelaskan 
Sekarang disni 
Kita kembalikan subah object seperti user ini 


jection View Go Debug Term 


LI e« € user blocdan e 
OPEN EDITORS import 
A 
€ E import 
© © user blocdart 
: class UserBloc extends Bloc«int, User 


MVVM DEMO 


m idea override 
Ba User get initialState = null; 
E 

override 

Stream<User> mapEventToState(int 


return null; 


} 


4 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


Initial state tidak boleh null 

Makanya sudah buat uninitizedUser jadi ini untuk petanda ini user tapi belum di 
initilsasi 

Jadi disini guna uninitialUser 

Jadi disini stream 

Kita try 

Catch 

Untuk jaga2 kalau api nya kalau ada yg asal2 

Nah disni kita apaain disini ambil user lalu api 

Dgn id untuk masukan ke event ini 

Jadi di try 

Buat user = user.getUserFromApi(event) lalu id nya event 
Buat await karena async 

Lalu di yiend hasil nya dikeluarkan user; 

Sudah jadi bloc nya 


OP. & user blocdart 
OPEN EDITORS 1 UNSAVED import 


x import 


class UserBloc extends Bloc<int, User» 
@override 
User get initialState = UninitializedUser(); 


override 
Stream«User» mapEventToState(int event) asyncx | 
try 1 
User user = await User.getUserFromAPI(event); 
yield user; 


) catch (_) {} 


} 


3 
[mvvm_demo] flutter packages get 

Running "flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


| = E Zen E NG mahnani 
Sekarang buat ui 

User_cart.dart 

Untuk menampilkan si user 

Gunakn stl 

Import material 

Disni kembalikan container 

Lalu isi nya widht doubleinfinity ikuti lebar yg sedia 
Lalu margi nya 10 

Padding 10 

Decoration untuk shadow untuk bayangan 

Lalu berikan border radius supaya melengkung 
Border nya kasih warna 


ort 


ss UserCard extends StatelessWi 

override 

idget build(BuildContext context) { 

return Container( 
width: double.infinity, 
margin: EdgeInsets.all(20), 
padding: EdgeInsets.all(10), 
decoration 0) ion(boxShadow: [ 

B shadov Color(0x55000000), offset: Offset(1, 1), blurRadius: 7) 

], 
borderRadius: BorderRadius.circular(15), 
border: Border.all(color: Colors.blueGrey)), 


" Put Flutter 


[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 


DEPENDENCIES 


Lalu child nya dialam container ini pasang row itu kesamping 
Kareena ingin kasih foto disamping datanya2 

Children pertam itu gambar kasih melengkusng biart bagus 
Maka gunakan container 

Lebar tinggi 45 

Lalu decoration dan image nya 
url diambil dari user yg diberikan 


ebug 


LI . è B LI rddat e 
OPEN EDITORS 2 UNESAVED padding: EdgeInsets.all(10), 
decoration: BoxDecoration(boxShadow: [ 
BoxShadow(color: Color(0x55000000), offset: Offset(1, blurRadius: 7) 
], 
borderRadius: BorderRadius.circular(15), 
border: Border.all(color: Colors.blueGrey)), 
child: N 
children: <Widget>[ 
Container( 
width: 75, 
height: 75, 
decoration: BoxDecoration(borderRadius: BorderRadius.circular(15) 
,image: DecorationImage(image: NetworkImage("UPL"))), 
) 
P 


di 


3 TPL Flutter 
[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 


Diatas buat user user buat final karena stl 


Lalu buat controktur nya dia minta this.user 
Lalu import usernya 
XJ Fie fion View ( m" minal He 


& & user canddan e 
import 
import 


o 


OPEN EDITORS “2 UNSAVED 


class arCard extends State 
final User] user; 


UserCard(this.user); 
ajoverride 
iget build(BuildContext context) ( 
return Container( 
width: double.infinity, 
margin: EdgeInsets.all(20 
padding: > ts.all(10), 
decoration: Box Ii 
B : Color(0x55000000), offset: Offset(1, 1), blurRadius: 7 


borderRadius: BorderRadius.circular(15), 


3 Flutter 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 13.0s 
exit code 0 


OUTUNE 


DEPENDENCIES 


é . è LI © user carddat © 


borderRadius: BorderRadius.circular(15), 
border: Border.all(color: Colors.blueGrey)), 
——child: Row 
© © user adda = k 
area children: <Widget>[ 
mwn DEMO L Container( 
M idea . 
width: 75, 
- height: 75, 
a decoration: BoxDecoration 
borderRadi BorderRadius.circular(15), 
image: DecorationImage(image: NetworkImage(user.avatar|))), 


Flutter 


[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


Untuk si gambarnya 
Sekarang buat column untuk buat text nya tapi dia kebawah 

Kita buat column 

Kasih jarak kesamping dgn text nya jadi kasih margin only right 10 
Di columncros pasang start rata kiri 


& user carddart e 
OPEN EDITORS “2 UNSAVED 


A borderRadius: BorderRadius.circular(15), 


dan border: Border.all(color: Colors.blueGrey)), 
: child: Row 
children: <Widget>[ 


| 
MVVM DEMO | Container( 


width: 75, 
height: 75, 
margin geInsets.only(right: 10 
decoration: BoxDecoration 
borderRadius: BorderRadius.circular(15), 
image: DecorationImage(image: NetworkImage(user.avatar))), 


m 
Column( 
crossAxisAlignment: Cr 
) 
], 


, 


3 UTL Flutter 


[mvvm demo] flutter packages get 
Running "flutter pub get" in mvvm demo ... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


D P Type here to sea 
Childreen itu pasang text tu;isan itu “nama: “+ user " " + lastname), 
Dan email 
Dan juga id 


ard da 


& user card dart 
OPEN EDITORS 1 UNSAVED neigt: 15, 
margin: EdgeInsets.only(right: 10), 
decoration: BoxDecoration 
borderRadius: BorderRadius.circular(15), 
image: DecorationImage(image: NetworkImage(user.avatar))), 
)s 
Column( 
crossAxisAlignment: CrossAxisAlignment.start, 
children: «W t» 
Text( - * user.id), 
Text( : + user.firstName + + user. LastName), 
Text( : " + user.email) 


Flutter 


[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
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TODOS 


IS 
AOR aH EOE f BE epp, B 


Jadi kira2 ini untuk ui nya 
Sekarang buat lagi untuk main page.dart 


3 
[mvvm demo] flutter packages get 

Running “flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 


TODOS 


E P Type here to search 
Main page untuk pisahkan lagi boleh buat untuk folder baru 


Untu main page kita import 
Buat sti 

Material 

Scafold appbar 

Kasih judul demo MVVM 
Body nya 

Column 

Crosaxis center 

Children kasih 

raisedButton tulisan random user 
onprased kosong idahulu 
lalu pasang 

UserCard nya 


& main page.dart 6 


appBar: AppBar 
backgroundColor: Colors.blueGrey, 
title: Text("D jn 


OPEN EDITORS 2 UNSAVED 


, 
body: Column 
crossAxisAlignment: Cr sAlignment.center, 


onPressed: 


ye 
UserCard( ) 


l, 


); 


4 UTPL Flutter 
[mvvm_demo] flutter packages get 

Running "flutter pub get" in mvvm_demo ... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 


TODOS 


userCArd butuh user carena belum pasang bloc nya belum ada 
pasang juga sama di atas 

User user; pakai final 
Buat contructornya 

Kita ambil dari user.dart 


minal f sl Studie 


LI . © & main pagedan e 
import 
import 


import 


class MainPage extends S 
final User user; 


MainPage(this.user); 
override 
widget build(BuildContext context) { 
return Scaffol 
appBar: A lar 
backgroundColor: Colors.blueGrey, 
title: Text( N » 


, 
body: Column 
crossAxisAlignment: CrossAxisAlignment.center, 


4 TPL Flutter 
[mvvm_demo] flutter packages get 

Running "flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


Lalu disni kita ambil user nya 


Ltitle: Text( 


, 
body: Column 
crossAxisAlignment: CrossAxisAlignment.center, 
children: <Widget>[ 
| 


MVVM DEMO 


m jd z 
" | —child: 
= onPressed: 
a ), 
UserCard(user) 
l, 


); 


3 
[mvvm demo] flutter packages get 

Running "flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


nm. om em nasenne d os pin, W 
Kita ke main dart seperti biasa disni 

Stl 

Material 


Return nya materialapp 

Hapus banner nya 

Home nya blocProvider 

Builder (context) => UserBloc() 
Lalu children MainPAge 
userBlock import dahulu 
kembali ke mainPage 


& mindan e 6 
import 
import 
import 


void main => runApp(MyApp( )); 


MVVM DEMO 


m id 
class MyApr 


. 

- @override 
pe Widget build(BuildContex 
return MaterialApp( 
debugShowCheckedModeBanner: 
home: BlocPr der(builder: 

child: MainPage(),), 


extends State 


E 
& 
& 


De 


[mvvm demo] flutter packages get 


Running "flutter pub get" in mvvm demo. 


exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


disini user kita hapus saja 


File Edit Selectic 


B . 6 
1mport 
1mport 
1mport 


OPEN EDITORS N UNSAVED 


LAJ 


X © main page dan 


m class MainPage extends 


final User user; 


MVVM DEMO 
Midea 


MainPage(this.user); 

override 

Widget build(BuildContext 

ffold( 

appBar: AppB 
backgroundColor: Colo 
title: Text( A 


return 


, 
body: Column 
| crossAxisAlignment: Cros 


[mvvm demo] flutter packages get 


Running "flutter pub get" in mvvm demo. 


exit code 0 


OUTUNE 
DEPENDENCIES 


Kembali ke main dart 
mainPage kita import dart nya 
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ssWidget 


context) { 


false, 
(context) — UserBloc(), 


Flutter 


ee 13.0s 


context) 1 


blueGrey, 


ignment.center, 


Flutter 


oe 13.0s 


"uoo uw 


disni user nya belum ada maka kita bungkus 


é © main page dart 


YULLUN DU 


return Scaffold( 


TUNGGAL) 1 


appBar: AppBar 
backgroundColor: Colors.blueGrey, 
title: Text( ) 


, 
body: Column 
crossAxisAlignment: CrossAx iment.center, 
children: 


onPressed: 
), 
UserCard(user) 
], 
, 
); 
l 
2 m 
[mvvm demo] flutter packages get 
Running "flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 


bungkus dgn blocBuilder 

children ganti bulider 

blocBuilder buat tipenya 

UserBloc, User kita import blocnya 


e oe 6 & Lj & main pagedart e 
get build(BuildContext context) 1 
return < fold( 
appBa \ppBar 
backgroundColor: Colors.blueGrey, 
title: Text( VM"), 
mwn DEMO , ) 
= e body: Column 
- crossAxisAlignment: Cross sAlignment.center, 
em children: «Widget»[ 
| RaisedButton( 
L-child: Text 
onPressed: ; 


W 


BlocBuilder«UserBloc, User>(| 
L builder: (context, user) = UserCard(user)) 


], 


OUTPUT Flutter 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 


Didalam main page buat juga UserBloc bloc = 
Kasih tau tipenya 


OPEN EDITORS 1 UNSAVED 


"a 


ontext 


Scaffold( 

appBar: 
backgroundColor: Color 
title: Text( 


return 


AppBar 


| 


, 

body: Column 
crossAxisAlignment : 
children: «Wi 


Rais 


onPressed: 
), 
BlocBuilder«UserBloc« 
L— builder: 
], 
1 x 


[mvvm demo] flutter packages get 


Running "flutter pub get" in mvvm demo... 


exit code 0 


OUTUNE 
DEPENDENCIES 
TOOOS 


Di onprased ini kasih tau ketika klik maka b 
bilang n random 


Debug Terminal 


e 


OPEN EDITORS. 
oë 
& 


2 UNSAVED 


build(BuildCo 

bloc 

bloc.dart return Scaffol 

appBar: 
backgroundColor: 
title: Text( 


Lou 


x 
m. AppBar 
Color 


MVVM DEMO 


, 
body: Column 
crossAxisAlignment : 
children: «Widget»[ 
RaisedButton( 
L-child: Text 
onPressed: 


context, 


& main page.dart 


context) ( 
BlocProvider.of«UserBloc»(context); 


s.blueGrey, 


gnment.center, 


User>( 
user 


= UserCard(user)) 
Flutter 


13.0s 


loc.dispanct kasih tau angka nya berapa 


al Stud 


npagedart e 


Bloc»(context); 


's.blueGrey, 
), 


AxisAlignment.center, 


bloc.dispatch(event); 


W 


BlocBuilder«UserB 


or 
1 


[mvvm demo] flutter packages get 


Running "flutter pub get" in mvvm demo... 


exit code 0 


OUTUNE 
DEPENDENCIES 


TODOS 


, User Hi 


Flutter 


13.0s 


Di mainPage buat juga final Random random(); ini ada dart math 


ai Studie 
& main pagedant € 


import 


import 
import 
import 
import 
import 


class MainPage extends StatelessWidget 


10 final m random - lom( ) ; 
override 
Widget build(BuildContext context) 
UserBloc bloc ` 
return Scaffold( 
appBar: 
backgroundColor: Colors.blueGrey, 
title: Text( | 
D oum 
[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


Disni maka nya jadi (random. 


Edit Selec 


minal al Studi 


€ 6 main pegadan © 
Gppuai. 


backgroundColor: Colors.blueGrey, 


title: Text( 


E] 
© 


OPEN EDITORS 2 UNSAVED 


-body: Column 


crossAxisAlignment: Cr xis g t.center, 


children: <Wi to] 
—Raise utton( 
—child: Text 
onPressed: 
bloc.dispatch(random.ne); 
" ?nextInt(..) 
), nextDouble() 


BlocBuilder«UserBloc, User>@nextBool() 
| 


], 


1 ' 
[mvvm demo] flutter packages get 

Running "flutter pub get" in mvvm demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


Dari 10 antara 0 dan 9 maka nya di tambah1 


builder: (context, user @noSuchMethod(...) 


Flutter 


13.0s 


(int max » 


Generates a non-negative 
random integer uniformly 
distributed in the range from 
0, inclusive, to [max], 
exclusive. 


Flutter 


13.05 


al Stud 


© & main pagedan e 
OPEN EDITORS “2 UNSAVED Gppear. np ^ 


backgroundColor: Colors.blueGrey, 
title: Text( J; 


body: Column 
crossAxisAlignment: Cross Alignment.center, 


child: Text 
onPressed: 
bloc.dispatch(random.nextInt(10) + 1); 


), 
BlocBuilder«UserBloc, User»( 
l builder: (context, user) = UserCard(user 


], 


TUT Flutter 


[mvvm demo] flutter packages get 
Running “flutter pub get" in mvvm demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
TODOS 


LI LI & main page.dart 
appwas. Appu 


backgroundColor: Colors.blueGrey, 
title: Text( VVM"), 


Li 
body: Column 
crossAxisAlignment: CrossAxisAlignment.center, 
children: <Widget>[ 
I— RaisedButton( 
| child: Text 
color: Colors.blueGreyl, 
onPressed: 
bloc.dispatch(random.nextInt(10) * 1); 


3locBuilder«UserBloc, User»( 
builder: (context, user) => UserCard(user 


oumu Flutter 


[mvvm_demo] flutter packages get 
Running “flutter pub get" in mvvm_demo... 13.0s 
exit code 0 


OUTUNE 
DEPENDENCIES 
Tooos 


|: Em 


Disini kita cobak 


maindart 
wanan 'package:flutter/material.dart'; 
'package:flutter bloc/flutter bloc.dart'; 
'package:mvvm demo/ui/main page.dart'; 
'bloc/user bloc.dart'; 


main() — runApp( O0); 


{ 


build( context) { 
return ( 
debugShowCheckedModeBanner: 
home: (builder: (context) > 
child: €)» 


CALL STACK 


package:flutt 


255PM 


LE NM- E E LJ ADR SHENG L o6 vao. M 


|: Eam 


Ini eror karena pertama kali harus class initialUSer 

Maka kita ubah dulu 

Ke mainPage 

Disni kita cek kalau user nya itu uninital user maka kita buat container() ksong 
kalau gk ? lalu UserCard 


al f sal Studic 


main pagedart 6 


VARIABLES 


body: ( 
crossAxisAlignment: .center, 
children: « »[ 
( 
L child: (“Pick Random User"), 
color: .blueGrey, 
onPressed: () { 
bloc.dispatch( random.nextInt(10) + 1); 
}, 
< ; »( 
builder: (context, user) — 
(user is Jhe? : (user)) 


CALL STACK 


package: flutter/../widgets/framework.dart: 3101 
package: flutter/.../widgets/framework.dart: 2994 


BREAKPOINTS 


package: flutter/.../widgets/framework.dart: 3961 
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Mka dilihat tidak ada 


main page.dart 


SUNT body: ( 
crossAxisAlignment: 
| children: « »[ 
Li 
L child: ("Pick Random User"), 

color: .blueGrey, 

onPressed: () 1 
bloc.dispatch(random.nextInt(10) + 1); 


}, 


< : »( 
builder: (context, user) $ 


(user is JE? 


CALL STACK 


package: 
package: 


ackage: 
BREAKPOINTS packa 6 


saa? oo 8 
Klik lagi maka tampil lagi 
Kira2 seperti ini 
Misalkan ui nya jelek ini kasih warna 
Kalau ganti ui tingal enak ganti di ui saja 


No Configura» GP user card dart € 
VARIABLES build( context) | 
return ( 
width: .infinity, 
margin: .all(20), 
padding: .all(10), 
decoration: 
color: «blueGrey[100]], 
boxShadow: [ 
color: (0x55000000), offset: (1, 1), blurRadius: 7) 
] 
borderRadius: .circular(15), 
border: .all(color: .blueGrey)), 
child: ( 
children: « »[ 


width: 75, 
CALL STACK 


package: TiuUtTer/../wlGgets/ Tramework .Gart: 5/3506 
package: flutter/../widgets/framework.dart: 3924 


package: flutter/.../widgets/framework.dart: 4088 


BREAKPOINTS 


LETT package:flutter/../widgets/framework.dart:3919 
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Lalu diraisedButton ganti warna text nya jadi white 


No Configure * main page.dart 


VARIABLES L body: ( 
crossAxisAlignment: .center, 
children: « »[ 


child: ( 
"Pick Random User", 
style: (color: 


), 


color: .blueGrey, 


onPressed: () { 
bloc.dispatch(random.nextInt(10) + 1); 


}, 


< 5 »( 


builder: (context, user) — 
(user is yg OQ : (user) 


CALL STACK 


package: Tiutter/../wladgets/ Tramework.Gart: 3/35 
package: flutter/.../widgets/framework. dart: 3924 


package: flutter/.../widgets/framework. dart: 4088 


BREAKPOINTS 
W AN Excep package: flutter/.../widgets/framework.dart:3919 
@ Uncaught Ex 


No Configure * main. page dart 


VARIABLES. || bo d y : ( 
crossAxisAlignment: .center, 
children: « »[ 


child: ( 
"Pick Random User", 10:10 
. Nama: Byron Fields 
style: (color: .white), © Sp mo byron eldsqreqres.n 


y (new) 
color: .blueGrey, 


onPressed: () 1 
bloc.dispatch(random.nextInt(10) 


}, 


< ; »( 
builder: (context, user) — 
(user is )? 


CALL STACK 
package: 


package: 
package: 


BREAKPOINTS | 
M A eer package: 
O Unca 


Klik maka ganti2 


Seperti ni car MVVM 


